<template>
  <div class="task">
    <div class="task_header">
      <div><i class="el-icon-edit-outline"></i>{{ $t('routes.taskManagement') }}</div>
      <div class="task_operation">
        <div class="task_search">
          {{ $t('button.search') }}
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#589ef8"> </el-switch>
        </div>
      </div>
    </div>
    <div class="task_content">
      <el-collapse-transition>
        <c-form v-if="value" />
      </el-collapse-transition>
      <c-table
        :loading="isLoading"
        @getFlowListData="getFlowListData"
        :FlowTaskList="FlowTaskList"
      />
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import cForm from './components/form.vue'
import cTable from './components/table.vue'
export default {
  data() {
    return {
      value: true,
      isLoading:false
    }
  },

  components: {
    cForm,
    cTable,
  },

  computed: {
    ...mapState({ FlowTaskList: (state) => state.flowTaskStore.FlowTaskList }),
  },

  async mounted() {
    await this.getFlowListData()
    await this.getFlowList()
  },

  methods: {
    ...mapActions('flowTaskStore', ['getFlowTaskList']),
    ...mapActions('flowClassifyStore', ['getFlowList']),
    async getFlowListData(num = 1, size = 10) {
      this.isLoading = true
      const i = await this.getFlowTaskList({
        num,
        size,
      })
      this.isLoading = false
      // this._info(i, {
      //   success: [
      //     this.$t('flowTask.flowData', [this.$t('button.search'), this.$t('flowTask.title')]),
      //   ],
      //   error: [this.$t('flowTask.flowData')],
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
.task {
  height: calc(100% - 54px);
  .task_header {
    border-bottom: 1px solid #eee;
    height: 40px;
    width: 100%;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    & i {
      color: #3e70dd;
      padding: 0 5px;
    }
  }
  .task_content {
    height: calc(100% - 40px);
    padding: 10px;
  }
}
</style>
